<template>
  <div class="header_top row">
    <div class="col-md-3 left">
      <img src="@/assets/img/logo.png" alt="" />
    </div>
    <div class="col-md-6 center">
      <input type="text" placeholder="小说名称或作者" />
      <p>搜索</p>
    </div>

    <div class="col-md-3 right">
      <p v-if="$store.state.userdata == null">
        欢迎您！【<a class="pro" href="/home/login">登陆</a>】或【<a
          class="pro"
          href="/home/register"
          >注册</a
        >】
      </p>
      <p v-else>
        欢迎您！<a class="pro" href="#">{{ $store.state.userdata.username }}</a>
        【<a class="pro" @click.prevent="outLogin">退出登陆</a>】
      </p>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { signOut } from "../../api/data";
export default {
  setup() {
    const store = useStore();
    const outLogin = async () => {
      let data1 = await signOut({ user_id: store.state.userdata._id });
      if (data1.code != 200) {
        return alert(data1.msg);
      }
      store.commit("setuserdata", null);
      alert(data1.msg);
    };

    return {
      outLogin,
    };
  },
};
</script>

<style lang="scss" scoped>
.header_top {
  height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    height: 65px;
  }
}
.left {
  flex: 3;
}
.center {
  flex: 6;
  display: flex;
  align-items: cnter;
  justify-content: center;
  input {
    width: 60%;
    height: 40px;
    border: 2px solid #88c6e5;
    padding-left: 10px;
    font-size: 14px;
  }
  p {
    height: 40px;
    width: 15%;
    background-color: #88c6e5;
    line-height: 40px;
    text-align: center;
    color: #fff;
    &:hover {
      background-color: rgb(58, 130, 189);
      color: #fff;
    }
  }
}
.right {
  flex: 3;
  color: #555;
  text-align: right;
}

.pro {
  cursor: pointer;
  color: #369;
}
</style>